<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消缺统计</title>
    <!--<link rel="stylesheet" href="../../layui/css/layui.css">-->
  <script type="text/javascript" src="../../js/echarts.min.js"></script>
</head>
<body>
<div style="padding:10px;background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">信息统计/消缺统计</div>
                <div class="layui-card-body" >
                    <!--数据表格-->
                    <form class="layui-form">
                    <div class="layui-inline">
                        <label class="layui-form-label">消缺员账号</label>
                        <div class="layui-input-block">
                            <input type="text" name="sovle_account" lay-verify="role_name" autocomplete="off" placeholder="请输入账号" class="layui-input">
                        </div>
                    </div>
                    <button type="button" id="query" style="margin-left: 20px" class="layui-btn">查询</button>
                    <div id="main" style="width: 800px;height: 600px"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script rel="stylesheet" src="../../js/jquery-3.4.1.js"></script>
<!--<script rel="stylesheet" src="../../layui/layui.js"></script>-->
<script type="text/javascript">
    layui.use(['laydate','form','layer'], function() {
        var laydate = layui.laydate;
        var form = layui.form
            , layer = layui.layer;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var data = null;
        $("#query").click(function () {
            var account=$("input[name=sovle_account]").val();
            $.ajax({
                url:"/eliminate.do",
                type:"post",
                data:{account:account},
                success:function (res) {
                    if (res.code == 200) {
                        data = res.data;
                        var option = {
                            title: {
                                text: '消缺统计',
                                subtext: '缺陷类别',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            legend: {
                                type: 'scroll',
                                orient: 'vertical',
                                right: 10,
                                top: 20,
                                bottom: 20,
                                data: data
                            },
                            series: [
                                {
                                    name: '缺陷类型',
                                    type: 'pie',
                                    roseType: 'angle',
                                    radius: '55%',
                                    center: ['40%', '50%'],
                                    data: data,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    } else if (res.code == 405) {
                        layer.msg(res.msg, {icon: 5});
                    }else if (res.code == 500) {
                        layer.msg(res.msg, {icon: 5});
                    }
                }
            });
        });



        $.ajax({
            url: "/eliminate.do",
            type: "get",
            success: function (res) {
                if (res.code == 200) {
                     data = res.data;
                    var option = {
                        title: {
                            text: '消缺统计',
                            subtext: '缺陷类别',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            type: 'scroll',
                            orient: 'vertical',
                            right: 10,
                            top: 20,
                            bottom: 20,
                            data: data
                        },
                        series: [
                            {
                                name: '缺陷类型',
                                type: 'pie',
                                roseType: 'angle',
                                radius: '55%',
                                center: ['40%', '50%'],
                                data: data,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                } else if (res.code == 405) {
                    layer.msg(res.msg, {icon: 5});
                }
            }
        });

    });
</script>

</html>